 <template>
  <div class="box">
      <Header title="行程设置"></Header>
      <div class="trip-setList-box" v-for="(v,i) in tripSetList" :key="i">
         <div class="trip-set-title">
             <div>
                 <i>D1</i>
                 <span>{{v.time}}</span>
             </div>
             <p @click="doDel(key)">删除</p>
        </div>
          <van-tabs v-model="active" color="#0FD2B2">
              <van-tab v-for="(item,index) in v.list" :key="index" :title="item.title" >
                  <ul class="trip-set-list">
                      <li class="trip-set-item" v-for="(value,key) in item.list" :key="key">
                          <div class="img-box">
                              <img :src="value.img" alt="">
                          </div>
                          <div class="bottom-box">
                              <span>{{value.name}}</span>
                              <button @click="doAdd(key)"  v-show="isCancle!=key">+添加到行程</button>
                              <button class="cancle" @click="doCancle()" v-show="isCancle==key">-取消行程</button>
                          </div>
                      </li>
                  </ul>

              </van-tab>
          </van-tabs>
      </div>
      <div class="add-box">
          <button @click="addDay">+增加一天</button>
      </div>
      <router-link to="/myTrip" class="save-btn">保存</router-link>
  </div>
</template>

<script>
import Header from '@/components/Header/Header'
import tripSetImg1 from '@/assets/temporary/trip-set-img1.png'
import tripSetImg2 from '@/assets/temporary/trip-set-img2.png'
import tripSetImg3 from '@/assets/temporary/trip-set-img3.png'
import tripSetImg4 from '@/assets/temporary/trip-set-img4.png'
export default {
    name:'TripSet',
    components:{Header},
    data(){
        return{
            active:0,
            isCancle:-1,
            count:2,
            tripSetList:[{time:'8月1日',list:[
                {title:'游玩',list:[{img:tripSetImg1,name:'少林寺'},{img:tripSetImg2,name:'三皇寨'},{img:tripSetImg3,name:'嵩阳书院'},{img:tripSetImg4,name:'达摩洞'}]},
                {title:'住宿',list:[{img:tripSetImg1,name:'少林寺'},{img:tripSetImg2,name:'三皇寨'},{img:tripSetImg3,name:'嵩阳书院'},{img:tripSetImg4,name:'达摩洞'}]},
                {title:'美食',list:[{img:tripSetImg1,name:'少林寺'},{img:tripSetImg2,name:'三皇寨'},{img:tripSetImg3,name:'嵩阳书院'},{img:tripSetImg4,name:'达摩洞'}]},
                {title:'购物',list:[{img:tripSetImg1,name:'少林寺'},{img:tripSetImg2,name:'三皇寨'},{img:tripSetImg3,name:'嵩阳书院'},{img:tripSetImg4,name:'达摩洞'}]},
                {title:'交通',list:[{img:tripSetImg1,name:'少林寺'},{img:tripSetImg2,name:'三皇寨'},{img:tripSetImg3,name:'嵩阳书院'},{img:tripSetImg4,name:'达摩洞'}]}

            ]},{time:'8月2日周四',list:[
                {title:'游玩',list:[{img:tripSetImg1,name:'少林寺'},{img:tripSetImg2,name:'三皇寨'},{img:tripSetImg3,name:'嵩阳书院'},{img:tripSetImg4,name:'达摩洞'}]},
                {title:'住宿',list:[{img:tripSetImg1,name:'少林寺'},{img:tripSetImg2,name:'三皇寨'},{img:tripSetImg3,name:'嵩阳书院'},{img:tripSetImg4,name:'达摩洞'}]},
                {title:'美食',list:[{img:tripSetImg1,name:'少林寺'},{img:tripSetImg2,name:'三皇寨'},{img:tripSetImg3,name:'嵩阳书院'},{img:tripSetImg4,name:'达摩洞'}]},
                {title:'购物',list:[{img:tripSetImg1,name:'少林寺'},{img:tripSetImg2,name:'三皇寨'},{img:tripSetImg3,name:'嵩阳书院'},{img:tripSetImg4,name:'达摩洞'}]},
                {title:'交通',list:[{img:tripSetImg1,name:'少林寺'},{img:tripSetImg2,name:'三皇寨'},{img:tripSetImg3,name:'嵩阳书院'},{img:tripSetImg4,name:'达摩洞'}]}

            ]}]
        }
    },
    created(){
        this.getQurey()
    },
    methods: {
        getQurey(){
            this.date=this.$route.query.time
            console.log(this.date)
        },
        addDay(){
                let countNum=this.count++
            let obj={time:`8月${countNum}日`,list:[
                {title:'游玩',list:[{img:tripSetImg1,name:'少林寺'},{img:tripSetImg2,name:'三皇寨'},{img:tripSetImg3,name:'嵩阳书院'},{img:tripSetImg4,name:'达摩洞'}]},
                {title:'住宿',list:[{img:tripSetImg1,name:'少林寺'},{img:tripSetImg2,name:'三皇寨'},{img:tripSetImg3,name:'嵩阳书院'},{img:tripSetImg4,name:'达摩洞'}]},
                {title:'美食',list:[{img:tripSetImg1,name:'少林寺'},{img:tripSetImg2,name:'三皇寨'},{img:tripSetImg3,name:'嵩阳书院'},{img:tripSetImg4,name:'达摩洞'}]},
                {title:'购物',list:[{img:tripSetImg1,name:'少林寺'},{img:tripSetImg2,name:'三皇寨'},{img:tripSetImg3,name:'嵩阳书院'},{img:tripSetImg4,name:'达摩洞'}]},
                {title:'交通',list:[{img:tripSetImg1,name:'少林寺'},{img:tripSetImg2,name:'三皇寨'},{img:tripSetImg3,name:'嵩阳书院'},{img:tripSetImg4,name:'达摩洞'}]}

            ]}
            this.tripSetList.push(obj)
        },
        doDel(index){
           this.tripSetList=this.tripSetList.splice(index,1)
        },
        doAdd(index){
            this.isCancle=index
        },
        doCancle(index){
            this.isCancle=-1
        }
    }
}
</script>

<style lang="less" scoped>
.box{
    padding-left:0;
    padding-right:0;
}
.trip-setList-box{
    .trip-set-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:30/7.5vw;
        height: 135/7.5vw;
        background-color: #F7F6F5;
        i{
            display: inline-block;
            width: 70/7.5vw;
            height: 70/7.5vw;
            margin-right:20/7.5vw;
            border-radius: 50%;
            border: 3/7.5vw solid #0FD2B2;
            color: #0FD2B2;
            text-align: center;
            line-height: 70/7.5vw;
            font-size: 32/7.5vw;
        }
        span{
            font-size: 36/7.5vw;
            color: #313233;
        }
        p{
            font-size: 28/7.5vw;
            color: #636366;
        }
    }
    .trip-set-list{
        padding:0 20/7.5vw 30/7.5vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .trip-set-item{
            width: 335/7.5vw;
            margin:60/7.5vw 10/7.5vw 0;
            .img-box{
                width: 100%;
                height: 251/7.5vw;
                border-radius:10/7.5vw;
                overflow: hidden;
                >img{
                    display: block;
                    width: 100%;
                }
            }
            .bottom-box{
                margin-top:36/7.5vw;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 28/7.5vw;
                button{
                    width: 190/7.5vw;
                    height: 50/7.5vw;
                    background-color: #0FD2B2;
                    border-radius:25/7.5vw;
                    color: #fff;
                    font-size: 24/7.5vw;
                }
                .cancle{
                    background-color: #07ab90;
                }
            }
        }
    }

}
.add-box{
    width:100%;
    background-color: #F7F6F5;
    padding:65/7.5vw 30/7.5vw;
    >button{
        width: 100%;
        height: 78/7.5vw;
        font-size: 32/7.5vw;
        color: #0FD2B2;
        background-color: transparent;
        border:1px solid #0FD2B2;
        border-radius: 29/7.5vw;
    }
}
.save-btn{
    position: fixed;
    bottom: 0;
    left: 0;
    width:100%;
    height: 98/7.5vw;
    background-color: #fff;
    font-size: 36/7.5vw;
    color: #0FD2B2;
    font-weight: bold;
    text-align: center;
    line-height: 98/7.5vw;
    z-index: 999999;
}
/deep/.van-tabs__nav{
    justify-content: space-around;
}
/deep/.van-tabs__wrap--scrollable .van-tab{
        flex: 0 0 auto!important;
}
</style>